<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>长图</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .box {
        margin: 50px auto;
        position: relative;
        width: 512px;
        height: 400px;
        border: 1px #ffffff solid;
        overflow: hidden;
        /* 超出部分隐藏 */
    }

    .box>img {
        position: absolute;
        top: 0;
        left: 0;
    }

    .box>span {
        position: absolute;
        height: 200px;
        width: 100%;
        left: 0;
        cursor: pointer;
    }

    .box>span#up {
        top: 0;
    }

    .box>span#dom {
        bottom: 0;
    }
</style>
<script>
    window.onload = function(){
          function $(selecter){
              return document.querySelector(selecter)
          }
          var moveVal = 0;//移动距离
          var timer = null;//定时器id
          // 鼠标放在元素上执行的事件
          $('#up').onmouseover = function(){
          //    定时器在使用前一定要先清除
              clearInterval(timer)
              timer = setInterval(()=>{
                  moveVal-=3
                  if(moveVal<=-1070){
                      clearInterval(timer)
                  }else{
                      $('img').style.top=moveVal+'px';
                  }
                  
              },30)
             
          }

          $('#dom').onmouseover = function(){
               //    定时器在使用前一定要先清除
               clearInterval(timer)
              timer = setInterval(()=>{
                  moveVal+=3
                  if(moveVal<=0){
                      $('img').style.top=moveVal+'px';
                  }else{
                      clearInterval(timer)
                  }   
              },30)
             
          }

          // 鼠标离开大盒子，清除定时器
          $('.box').onmouseout=function(){
              clearInterval(timer)
          }

      }
</script>
<body>
    <div class="box">
        <img src="./imgs/mi.png" alt="">
        <!-- 辅助元素 -->
        <span id="up"></span>
        <span id="dom"></span>
    </div>
</body>

</html>